<template>
  <div>
    <el-row>
      <el-table
        ref="resourceTypeEntityDataList"
        :data="
          resourceTypeEntityDataList == null
            ? []
            : resourceTypeEntityDataList.slice(
                (pageData.currentPage - 1) * pageData.pageSize,
                pageData.currentPage * pageData.pageSize
              )
        "
        border
        :header-cell-style="getHeadClass"
        :row-class-name="getRowClassName"
        empty-text="当前没有数据，请添加数据"
        style="width: 98%; margin: 0 auto"
      >
        <el-table-column
          label="实体id"
          prop="resourceTypeEntityId"
          align="center"
          width="90"
          sortable
        ></el-table-column>
        <el-table-column
          v-for="item in resourceTypeEntityFieldList"
          :prop="item.resourceTypeFieldName"
          :label="
            item.resourceTypeFieldUnit != null &&
            item.resourceTypeFieldUnit != ''
              ? item.resourceTypeFieldTitle +
                '(' +
                item.resourceTypeFieldUnit +
                ')'
              : item.resourceTypeFieldTitle
          "
          :key="item.resourceTypeFieldId"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="描述"
          prop="resourceTypeEntityDescription"
          align="center"
          width="180"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="状态"
          prop="status"
          align="center"
          width="80"
          :formatter="formatterStatus"
          show-overflow-tooltip
          sortable
        ></el-table-column>
        <el-table-column
          label="创建人"
          prop="createdBy"
          align="center"
          width="100"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="使用人"
          prop="owner[1]"
          align="center"
          width="100"
          sortable
          show-overflow-tooltip
        ></el-table-column>
        <!-- <el-table-column
          label="修改人"
          prop="lastEditedBy"
          align="center"
          width="80"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="修改时间"
          prop="lastEditedTime"
          align="center"
          :formatter="formatterTime"
          width="120"
          show-overflow-tooltip
        ></el-table-column> -->
        <el-table-column
          show-overflow-tooltip
          align="center"
          width="120"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              style="color: green"
              @click="handleApplyInfo(scope.$index, scope.row)"
            >
              申请
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        hide-on-single-page
        background
        :current-page="pageData.currentPage"
        :layout="layout"
        :page-sizes="[5, 10, 20, 50, 100]"
        :page-size="pageData.pageSize"
        :total="pageData.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      ></el-pagination>
    </el-row>

    <!-- 申请资源弹窗 -->
    <ApplyInfoFormComponent
      @closed-dialog="closedDialog"
      :rowData="applyInfo"
      page="entityList"
      @refresh-list="getResourceTypeEntityDataList"
      :addOrUpdate="addOrUpdate"
      v-if="addApplyDialogVisible"
    ></ApplyInfoFormComponent>
  </div>
</template>

<script>
  import * as EnumApi from "@/api/enum";
  import * as UserEntityApi from "@/api/userEntity";
  import * as ResourceTypeFieldApi from "@/api/resourceTypeField";
  import * as ResourceTypeEntityApi from "@/api/resourceTypeEntity";
  import * as ResourceTypeEntityDataApi from "@/api/resourceTypeEntityData";

  import { usingStatus } from "@/config/settings";
  import ApplyInfoFormComponent from "@/views/pages/components/ApplyInfoForm";

  export default {
    data() {
      return {
        // 实体列表数据
        resourceTypeEntityDataList: [],
        // 实体类别名
        resourceTypeName: "pm",
        // 实体使用状态
        usingStatus: [],

        // 实体字段列表
        resourceTypeEntityFieldList: [],

        // 分页设置
        layout: "total, sizes, prev, pager, next, jumper",
        pageData: {
          currentPage: 1,
          pageSize: 20,
          total: 0,
        },

        // 控制添加申请窗口显示与消失
        addApplyDialogVisible: false,
        //当前是添加还是修改 true:添加;false:修改
        addOrUpdate: true,
        applyInfo: {},
      };
    },

    components: { ApplyInfoFormComponent },

    methods: {
      // 获取资源类别实体字段列表
      getResourceTypeEntityFieldList() {
        ResourceTypeFieldApi.getResourceTypeFieldByName(
          this.resourceTypeName
        ).then((res) => {
          this.resourceTypeEntityFieldList = res.data;
          this.resourceTypeEntityFieldList.forEach((fieldInfo) => {
            if (fieldInfo.resourceTypeFieldType == "enum") {
              EnumApi.getEnumItemByGroupName(fieldInfo.enumGroupName).then(
                (res) => {
                  this.$set(fieldInfo, "enumItemList", res.data);
                }
              );
            }
          });
          // 获取资源实体数据
          this.getResourceTypeEntityDataList();
          this.isShow = true;
        });
      },

      // 获取表格数据
      getResourceTypeEntityDataList() {
        let param = {
          resourceTypeName: this.resourceTypeName,
          status: "free",
          mayApply: true,
        };
        ResourceTypeEntityApi.getMayApplyEntityList(param).then((res) => {
          this.resourceTypeEntityDataList = res.data;
          this.pageData.total =
            this.resourceTypeEntityDataList == null
              ? 0
              : this.resourceTypeEntityDataList.length;
          // 获取资源实体动态字段数据
          this.getResourceTypeEntityFieldData();
        });
      },

      // 获取资源实体动态字段数据
      getResourceTypeEntityFieldData() {
        this.resourceTypeEntityDataList.forEach((element) => {
          ResourceTypeEntityDataApi.getResourceTypeEntityDataByEntityId(
            element.resourceTypeEntityId
          ).then((res) => {
            res.data.forEach((value) => {
              this.$set(
                element,
                value.resourceTypeFieldName,
                value.resourceTypeEntityDataValue
              );
            });
          });

          UserEntityApi.getUserEntityByEntityId(
            element.resourceTypeEntityId
          ).then((res) => {
            this.$set(
              element,
              "owner",
              res.data == null
                ? []
                : [res.data.userGroupName, res.data.username]
            );
          });
        });
      },

      // 申请资源弹窗
      handleApplyInfo(index, row) {
        ResourceTypeEntityApi.getResourceTypeEntityByEntityId(
          row.resourceTypeEntityId
        ).then((res) => {
          if (res.data != null) {
            if (res.data.status != "free") {
              this.$message.error("该资源未处于空闲状态，不可申请");
            } else {
              this.$set(
                this.applyInfo,
                "applyResourceId",
                row.resourceTypeEntityId
              );
              this.$set(
                this.applyInfo,
                "resourceTypeName",
                row.resourceTypeName
              );
              this.addApplyDialogVisible = true;
            }
          }
        });
      },
      // 弹窗关闭
      closedDialog(dialogVisible) {
        this.addApplyDialogVisible = dialogVisible;
        this.addOrUpdate = true;
        this.applyInfo = {};
        this.getResourceTypeEntityDataList();
      },

      // 格式化时间
      formatterTime(row, column, cellValue, index) {
        return cellValue.substring(0, cellValue.lastIndexOf("."));
      },
      // 格式化状态
      formatterStatus(row, column, cellValue, index) {
        let stat = cellValue;
        this.usingStatus.forEach((status) => {
          if (status.key == cellValue) {
            stat = status.value;
          }
        });
        return stat;
      },
      // 设置表格样式
      getHeadClass({ rowIndex }) {
        if (rowIndex == 0) {
          return "background-color:#ccc;color:#fff;font-size:30px;";
        }
      },
      getRowClassName({ row, rowIndex }) {
        if (rowIndex % 2 !== 0) {
          return "warning-row";
        }
      },

      // 当前页发生改变
      handleCurrentChange(val) {
        this.pageData.currentPage = val;
      },
      // 当前页大小发生改变
      handleSizeChange(val) {
        this.pageData.pageSize = val;
      },
    },

    created() {
      this.usingStatus = usingStatus;
      this.getResourceTypeEntityFieldList();
    },
  };
</script>
